<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>读者留言</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../static/markdown/marked.min.js"></script>
    <style>
        body {
            background-color: #f1f1f1;
        }

        .alert {
            position: relative;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: .25rem
        }

        .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: .75rem 1.25rem;
            color: inherit
        }

        .alert-warning {
            color: #856404;
            background-color: #fff3cd;
            border-color: #ffeeba
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5
        }

        .close:focus, .close:hover {
            color: #000;
            text-decoration: none;
            opacity: .75
        }

        .close:not(:disabled):not(.disabled) {
            cursor: pointer
        }

        button.close {
            padding: 0;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none
        }

        .close {
            padding: 1rem;
            margin: -1rem -1rem -1rem auto
        }

        .alert-dismissible .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: .75rem 1.25rem;
            color: inherit
        }

        .height-light {
            span {
                background-color: #009688;
            }
        }

        .layui-layout-admin .layui-logo {
            font-size: 24px;
            transition: all 0.5s;
        }

        .layui-layout-admin .layui-logo:hover {
            font-size: 40px;

            img {
                width: 30px;
            }
        }

        .layui-layout-admin .layui-logo img {
            width: 15px;
            margin-left: 5px;
            margin-top: 10px;
            transition: all 0.5s;
        }

        .layui-layout-admin .layui-body {
            top: 120px;
            right: 200px;
        }

        .layui-layout-admin .layui-footer {
            left: 0;
            right: 0;
            text-align: center;
        }

        .tab-bar {
            margin: 0 auto;
            width: calc(100% - 520px);
            height: 40px;
            background-color: rgb(35, 38, 46);
            display: flex;
            justify-content: space-around;
            border-radius: 0 0 40px 40px;
        }

        .tab-bar .tab-bar-item {
            a {
                color: #ffffff;
                display: block;
            }

            span {
                height: 5px;
                display: block;
            }

            align-self: center;
            height: 40px;
        }

        .tab-bar .tab-bar-item:hover {
            span {
                background-color: #009688;
            }
        }

        #li_4:hover {
            .tab-bar-item-item-parent {
                display: block;
            }

            .tab-bar-item-item {
                display: block;
            }
        }

        .tab-bar-item-item-parent {
            display: none;
            background-color: rgb(35, 38, 46);
            position: absolute;
            top: 60px;
            padding: 0 10px 5px 10px;
            border-radius: 5px;
            z-index: 10000;
        }

        .tab-bar-item-item-parent:hover {
            display: block;

            .tab-bar-item-item {
                display: block;
            }
        }

        .tab-bar-item-item {
            display: none;
            margin-top: 5px;
            z-index: 10000;
        }

        .tab-bar-item-item:hover {
            display: block;

            a {
                color: #25bba4;
            }
        }

        .title {
            position: absolute;
            top: 10px;
            left: 45%;
        }

        .title::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-bottom: 2px solid #000000;
            transition: all 0.5s linear;
        }

        .title::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-top: 2px solid #000000;
            transition: all 0.5s linear;
        }

        .title:hover::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 120%;
            top: 0;
            left: 0;
            border-bottom: 5px solid rgba(0, 0, 0, 0);
            transition-delay: 0.1s;
        }

        .title:hover::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 120%;
            top: 0;
            left: 0;
            border-top: 5px solid rgba(0, 0, 0, 0);
            transition-delay: 0.1s;
        }

        .container {
            position: fixed;
            bottom: 110px;
            left: 280px;
            right: 400px;
            width: calc(100% - 420px);
            height: 10px;
            margin: 0;
            padding: 10px;
            background-color: #f1f1f1;
            border-radius: 5px;
            overflow-y: scroll;
        }

        .container > * {
            margin-bottom: 10px; /* 设置元素之间的外边距 */
            font-size: 16px;
        }

        /* 最后一个元素不设置右侧外边距 */
        .container > *:last-child {
            margin-bottom: 0;
        }

        .input {
            position: fixed;
            bottom: 44px;
            left: 280px;
            width: calc(100% - 600px);
            padding: 10px;
            text-align: center;
        }

        .input #textInput {
            height: 80px;
            width: calc(100% - 420px);
            border-radius: 10px;
            font-size: 16px;
            text-indent: 1ch;
            padding: 4px;
        }

        .input #summit {
            position: absolute;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            right: 210px;
            bottom: 10px;
        }

        .input #summit:hover {
            opacity: 0.8;
        }

        code {
            border-radius: 10px;
            margin: 5px 15px;
        }

        .container-body {
            padding-top: 60px;
        }

        .container-body ul {
            padding-left: 15px;
            padding-right: 15px;
            display: block;
        }

        .container-body ul li {
            padding: 2px;
            width: 100%;
            height: fit-content;
            float: none;
            cursor: pointer;
            list-style-type: none;
        }

        .container-body ul li p {
            width: 80%;
            padding: 15px;
            margin-top: 20px;
        }

        .container-body ul li input {
            display: list-item;
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 0 0 0 auto;
            padding: 0 0 20px 0;
            right: 0;
            background-color: #0ed839;
            cursor: pointer;
        }

        .my-comment {
            position: relative;
            text-align: right;
            right: 25px;
            border-radius: 6px 6px 15px 6px;
            margin: 0 0 0 0;
        }

        .my-comment:after {
            content: "○";
            position: absolute;
            right: -15px;
            bottom: 0;
            font-size: 20px;
        }

        .others-comment {
            position: relative;
            text-align: left;
            left: 25px;
            border-radius: 6px 6px 6px 15px;
            margin: 0 0 0 0;
        }

        .others-comment:before {
            content: "○";
            position: absolute;
            left: -15px;
            bottom: 0;
            font-size: 20px;
        }

        .solved-comment {
            background-color: rgb(176, 255, 213);
        }

        .solved-comment::after {
            position: absolute;
            content: "Solved";
            width: fit-content;
            height: 100%;
            top: 0;
            left: calc(100% - 90px);
            border: 0;
            color: rgba(0, 0, 0, 0.3);
            font-size: 20px;
            font-style: italic;
            font-weight: bold;
            transition: all 0.5s linear;
        }

        .solved-comment:hover::after {
            position: absolute;
            content: "Solved";
            width: fit-content;
            height: 100%;
            top: 0;
            left: calc(100% - 90px);
            border: 0;
            color: rgba(0, 0, 0, 0.8);
            font-size: 20px;
            font-style: italic;
            font-weight: bold;
            transition: all 0.2s linear;
        }

        .solved-comment:hover {
            background-color: rgba(0, 204, 102, 0.6);
        }

        .unsolved-comment {
            background-color: rgba(255, 181, 176, 0.5);
        }

        .unsolved-comment:hover {
            background-color: rgba(238, 46, 36, 0.5);
        }

        #comment-form {
            margin-left: 10px;
            transition: all 0.2s linear;
        }

        .dialog-box {
            width: fit-content;
            border: 1px solid #8f8f8f;
            border-radius: 10px 10px 8px 20px;
            padding: 10px;
            background-color: #fbf8e0;
        }

        #dialog-input-label {
            width: fit-content;
        }

        #dialog-input {
            height: 0;
            width: 300px;
            resize: none;
            border: 0;
            background-color: #fbf8e0;
            overflow-y: hidden;
        }

        .btns {
            width: 60px;
            display: flex;
            justify-content: space-around;
            margin: 0 0 0 auto;
        }

        .btns button {
            width: 30px;
            height: 30px;
            padding: 0;
            margin: 0;
            border-radius: 5px;
            flex: 1;
            font-size: 14px;
        }

        .comment-add:hover {
            background-color: rgba(27, 244, 136, 0.8);
        }

        .comment-cancel:hover {
            background-color: rgba(251, 104, 82, 0.8);
        }

        .form-hidden {
            display: block;
            position: absolute;
            z-index: 10000;
            right: -500px;
            top: 20%;
            transition: all 1s;
        }

        .form-show {
            display: block;
            position: absolute;
            z-index: 10000;
            right: 20%;
            top: 20%;
            transition: all 1s;
        }

        .comment-focus {
            filter: brightness(1.1);
            background-color: #00e676;
            box-shadow: 1px 1px 10px rgba(5, 71, 4, 0.35), -1px -1px 10px rgba(5, 71, 4, 0.34);
        }

        .prevent-click {
            pointer-events: none;
            cursor: none;
        }

        #side-nav {
            height: 0;
            width: 0;
            margin-left: 10px;
            padding: 10px 20px;
            top: 60px;
            position: fixed;
            background-color: #ffffff;
            border: 1px rgba(12, 12, 12, 0.3) solid;
            border-radius: 9px;
            transition: all 1s;
            overflow-y: scroll;
            box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
        }

        .nav-show {
            right: 0;
        }

        .nav-hide {
            right: -100%;
        }

        .comment-admin {
            width: 85% !important;
            padding: 10px !important;
            border-radius: 5px !important;
            background-color: #fbf8e0;
            align-self: center;
            margin-top: 20px !important;
            box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.3);
        }

        /* 自定义滚动条的整体样式 */
        ::-webkit-scrollbar {
            width: 6px; /* 设置滚动条的宽度 */
        }

        /* 自定义滚动轨迹的样式 */
        ::-webkit-scrollbar-track {
            background: #f1f1f1; /* 设置滚动轨迹的背景颜色 */
        }

        /* 自定义滚动滑块的样式 */
        ::-webkit-scrollbar-thumb {
            background: #888; /* 设置滚动滑块的背景颜色 */
            border-radius: 3px; /* 滚动条圆角 */
        }

        /* 当鼠标悬停在滚动滑块上时的样式 */
        ::-webkit-scrollbar-thumb:hover {
            background: #555; /* 设置鼠标悬停时滚动滑块的背景颜色 */
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <a href="{{ url_for('index_student') }}">
            <div class="layui-logo">书海<img src="../static/logo.png"></div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="../static/icon.jpg" class="layui-nav-img">
                    {{ name }}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="{{ url_for('user_info_student', id=current_user.card_id) }}">个人信息</a></dd>
                    <dd><a href="{{ url_for('change_password_student') }}">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{{ url_for('logout') }}">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li id="li_1" class="layui-nav-item">
                    <a class="" href="javascript:;">图书管理</a>
                    <dl class="layui-nav-child">
                        <dd id="li_1_1"><a href="{{ url_for('storage') }}">入库管理</a></dd>
                        <dd id="li_1_2"><a href="{{ url_for('borrow_admin') }}">学生借书</a></dd>
                        <dd id="li_1_3"><a href="{{ url_for('return_book_admin') }}">学生还书</a></dd>
                        <dd id="li_1_4"><a href="{{url_for('write_off') }}">图书注销</a></dd>
                    </dl>
                </li>
                <li id="li_2" class="layui-nav-item">
                    <a href="{{ url_for('change_info_admin') }}">管理员信息设置</a>
                </li>
                <li id="li_3" class="layui-nav-item">
                    <a href="{{ url_for('search_book_admin') }}">图书信息查询</a>
                </li>
                <li id="li_4" class="layui-nav-item">
                    <a href="{{ url_for('search_student') }}">学生信息查询</a>
                </li>
                </li>
                <li id="li_5" class="layui-nav-item">
                    <a href="{{url_for('announcement_admin')}}">发布公告</a>
                </li>
                <li id="li_6" class="layui-nav-item">
                    <a href="{{url_for('comments_admin') }}">读者留言</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container" id="container">
        <div class="title">
            <h2>留言板</h2>
        </div>

        <div class="container-body">
            <ul>
                {% for comment in comments %}
                {% if comment.status == 0 and comment.student_id == id %}
                <li>
                    <p id={{comment.id}} class="my-comment unsolved-comment"
                       onclick="showCommentForm(this,{{comment.id}})">
                        {{comment.comment}}
                        <input type="button" onclick="solved({{comment.id}})" value="✓">
                    </p>
                </li>
                {% elif comment.status == 1 and comment.student_id == id %}
                <li>
                    <p id={{comment.id}} class="my-comment solved-comment"
                       onclick="showCommentForm(this,{{comment.id}})">
                        {{comment.comment}}
                    </p>
                </li>
                {% elif comment.status == 0 and comment.student_id != id %}
                <li>
                    <p id={{comment.id}} class="others-comment unsolved-comment"
                       onclick="showCommentForm(this,{{comment.id}})">{{comment.comment}}
                        <input type="button" onclick="solved({{comment.id}})" value="✓">
                    </p>
                </li>
                {% else %}
                <li>
                    <p id={{comment.id}} class="others-comment solved-comment"
                       onclick="showCommentForm(this,{{comment.id}})">{{comment.comment}}
                    </p>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>

    <input id="id" hidden="hidden" value={{id}}>

    <div class="layui-footer">
        Copyright 2024 Construct
    </div>

    <canvas id="side-canvas"></canvas>

    <div class="comment-form form-hidden" id="comment-form">
        <div class="dialog-box">
            <p id="dialog-input-label" hidden="hidden"></p>
            <textarea id="dialog-input" class="dialog-input" placeholder="在这里给读者评论"></textarea>
            <input id="form-submit-value" type="hidden">
            <div class="btns">
                <button type="button" onclick="onSubmit()" class="comment-add">+</button>
                <button type="button" onclick="onCancel()" class="comment-cancel">×</button>
            </div>
        </div>
    </div>

    <div class="side-nav nav-hide" id="side-nav">
        <p>该留言下的评论</p>
        <ul id="side-nav-ul">
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../static/layui/layui.js"></script>
<script type="text/javascript" src="../../static/js/particle-animation.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        element.init();
    });

    $(document).ready(function () {
        $("#li_6").addClass("height-light");
        $("#container").css({
            'position': 'fixed',
            'top': '100px',
            'left': '280px',
            'width': '40%',
            'height': ($(window).height() - 244).toString() + "px",
            'margin': '0',
            'padding': '10px',
            'background-color': '#ffffff',
            'border-radius': '20px',
            'padding-bottom': '80px',
        });

        $("#dialog-input").on('input', function () {
            if (this.scrollHeight > this.clientHeight) {
                /* 调整side-nav高度 */
                document.getElementById("side-nav").style.height = parseInt(this.scrollHeight) - parseInt(this.style.height) + "px";
                this.style.height = this.scrollHeight + 'px';
            }
        });

        $("#side-nav").css({
            'height': ($(window).height() - 144).toString() + "px",
        });

        var form = document.getElementById('comment-form');
        // 添加单击事件监听器到整个文档
        document.addEventListener('click', function (event) {
            // 检查点击事件是否发生在菜单内部
            let isClickInsideMenu = form.contains(event.target);
            // 如果点击事件发生在菜单外部，则执行相应操作
            if (!isClickInsideMenu) {
                // 关闭菜单
                onCancel();
            }
        });
    });

    function solved(id) {
        fetch('http://localhost:5000/admin/comment/solved', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "comment_id": id
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                console.log(data);
                if (JSON.parse(data).code === 200) {
                    //
                    window.location.reload();
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    var old_focus_comment_id = "";

    function showCommentForm(element, comment_id) {
        let position = getElementPosition(element);
        let height;
        let top;
        if (element.offsetHeight > window.innerHeight*0.7) {
            height = 75;
            top = window.innerHeight-139;
        } else {
            height = element.offsetHeight;
            top = position.top;
        }
        $("#dialog-input").css({
            'width': element.offsetWidth + 'px',
            'height': height + 'px',
        });
        $("#comment-form").css({
            'display': 'block',
            'top': top + 'px',
            'left': position.left + element.offsetWidth + 'px',
        });
        if (old_focus_comment_id !== "") {
            document.getElementById(old_focus_comment_id).classList.remove("comment-focus");
        }
        old_focus_comment_id = comment_id;
        document.getElementById(comment_id).classList.add("comment-focus");
        let form = document.querySelector(".comment-form");
        let label = document.getElementById("dialog-input-label");
        let container = document.querySelector(".container-body");
        if (form.classList.contains("form-hidden")) {
            form.classList.remove("form-hidden");
        }
        container.classList.add("prevent-click");
        label.textContent = "comment id:  " + comment_id;
        form.classList.add("form-show");
        document.getElementById("form-submit-value").value = comment_id;
        showSideNav(comment_id);
        event.stopPropagation();
    }

    function onSubmit() {
        let comment_id = $("#form-submit-value").val();
        let admin_id = $("#id").val();
        let comment_content = $('#dialog-input');
        fetch('http://localhost:5000/admin/comment/add', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "comment_id": comment_id,
                "admin_id": admin_id,
                "comment": comment_content.val()
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                console.log(data);
                if (JSON.parse(data).code === 200) {
                    // 留言成功
                    comment_content.val("");
                    showSideNav(comment_id);
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    function onCancel() {
        let form = document.querySelector(".comment-form");
        let container = document.querySelector(".container-body");
        if (form.classList.contains("form-show")) {
            form.classList.remove("form-show");
        }
        $("#comment-form").css({
            'display': 'none',
        });
        document.getElementById("dialog-input").value = "";
        if (old_focus_comment_id !== "") {
            document.getElementById(old_focus_comment_id).classList.remove("comment-focus");
            old_focus_comment_id = "";
        }
        container.classList.remove("prevent-click");
        form.classList.add("form-hidden");
        hideSideNav();
        event.stopPropagation();
    }

    /* 显示侧边栏，侧边栏显示用户评论下的评论 */
    function showSideNav(comment_id) {
        let nav = document.getElementById("side-nav");
        if (nav.classList.contains("nav-hide")) {
            nav.classList.remove("nav-hide");
        }
        nav.classList.add("nav-show");

        let element1 = document.getElementById("comment-form");
        let element2 = document.getElementById("dialog-input");

        /* 计算侧边栏顶部相对页面位置 */
        let top = element2.offsetHeight + parseInt(element1.style.top, 10) + 60;
        let height;
        if (top > window.innerHeight/2) {
            // 位于页面下半
            height = parseInt(element1.style.top, 10) - 110;
            top = 70;
        } else {
            height = window.innerHeight - element2.offsetHeight - parseInt(element1.style.top, 10) - 140;
            top = element2.offsetHeight + parseInt(element1.style.top, 10) + 60;
        }
        $("#side-nav").css({
            'top': top + "px",
            'left': element1.style.left,
            'width': element2.offsetWidth + "px",
            'height': height + "px",
        });

        fetch('http://localhost:5000/admin/comment/get', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "id": comment_id,
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                let comments = JSON.parse(data).comments;
                let side_nav_ul = document.getElementById("side-nav-ul");
                side_nav_ul.innerHTML = "";
                for (const comment of comments) {
                    let li = document.createElement("li");
                    let p = document.createElement("p");
                    let label = document.createElement("label");
                    let time_label = document.createElement("div");
                    label.textContent = "Admin: "
                    li.classList.add("comment-admin");
                    p.textContent = comment.comment;
                    time_label.textContent = timestampToDate(comment.date);
                    time_label.style.color = "rgba(255,0,0,0.3)";
                    time_label.style.margin = "0 0 0 0";
                    time_label.style.position = "relative";
                    time_label.style.left = "-10px";
                    time_label.style.top = "-10px";
                    li.appendChild(time_label);
                    li.appendChild(label);
                    li.appendChild(p);
                    side_nav_ul.appendChild(li);
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    /* 隐藏侧边栏 */
    function hideSideNav() {
        let nav = document.getElementById("side-nav");
        if (nav.classList.contains("nav-show")) {
            nav.classList.remove("nav-show");
        }
        nav.classList.add("nav-hide");
        $("#side-nav").css({
            'left': '100%'
        });
    }

    /* 获取元素绝对位置 */
    function getElementPosition(element) {
        const rect = element.getBoundingClientRect();
        return {
            top: rect.top + window.pageYOffset,
            left: rect.left + window.pageXOffset
        };
    }

    /* 时间戳转换年月日 */
    function timestampToDate(timestamp) {
        const date = new Date(Number.parseFloat(timestamp));
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = date.getDate();

        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    }
</script>
</body>
</html>
